* {
  margin: 0;
  padding: 0;
}

.box {
  display: flex;
  width: 400px;
  height: 100px;
  margin: 200px auto;
}

.box .item {
  position: relative;
  width: 100px;
  height: 100px;
  border: 1px dashed #000;
  font-size: 48px;
}

.box .item .flag {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.box .item .text {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-color: #000;
  color: #fff;
}

.box .item:active .flag {
  width: 100%;
  height: 100%;
}

.item:nth-child(1) .text {
  transform: rotate(74deg) translate(52px, 133px);
}

.item:nth-child(2) .text {
  transform: rotate(117deg) translate(57px, 132px);
}

.item:nth-child(3) .text {
  transform: rotate(252deg) translate(286px, 128px);
}

.item:nth-child(4) .text {
  transform: rotate(268deg) translate(-22px, 112px);
}

.text {
  transition: 9999s 9999s;
}

.flag:hover + .text {
  transition: 0s;
  transform: translate(0, 0);
}
